<template>
  <div class="index">
    
    <div class="mt20">
        <div class="search-condition clearfix">
          产品：
          <Select v-model="tradeType" style="width:100px">
              <Option v-for="item in product1" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Select v-model="tradeType" style="width:100px">
              <Option v-for="item in product2" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;
          订单类型：
          <Select v-model="tradeType" style="width:100px">
              <Option v-for="item in orderTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;
          支付状态：
          <Select v-model="tradeType" style="width:100px">
              <Option v-for="item in tradeTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;
          时间：
          <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间" style="width:100px;"></DatePicker>
          至
          <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间" style="width:100px;"></DatePicker>
          
          &nbsp;&nbsp;&nbsp;
           <Button type="primary">查询</Button>
           
           <div class="fr">
             <Button @click="handleTabsAdd" type="warning" size="small" >数据导出</Button>
           </div>
        </div>
        
        <div class="mt20">
          <Table border stripe :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-paper c1" title="查看" size="20" @click="gotoDetail(row)"/>
            </template>
          </Table>
        </div>
    </div>
  
    <div class="page mt20">
      <Page :total="100" show-sizer show-total/>
    </div> 
  
  </div>
</template>

<script>
  export default {
    data () {
      return{
        position:[
          {title: '财务管理', link:'/admin/moneyManage'},
          {title: '订单管理'}
        ],
        tradeType: '1',
        product1:[
          {label: '云课堂',value: '1'},
          {label: '产品2',value: '2'},
        ],
        product2:[
          {label: '教育局版',value: '1'},
          {label: '学校版',value: '2'},
        ],
        orderTypes:[
          {label: '软件',value: '1'},
          {label: '硬件',value: '2'},
        ],
        tradeTypes:[
          {label: '支付宝',value: '1'},
          {label: '微信',value: '2'},
        ],
        columns1: [
          {title: '订单号', key: 'id'},
          {title: '产品名称', key: 'address'},
          { title: '产品型号', key: 'address'},
          { title: '产品类型', key: 'address'},
          { title: '订单类型', key: 'address'},
          { title: '创建时间', key: 'address'},
          { title: '支付/开通时间', key: 'address'},
          { title: '支付状态', key: 'address'},
          { title: '支付金额（元）', key: 'address'},
          { title: '操作', slot: 'action', width: 60, align: 'center'},
         ],
         data1:[
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           
         ]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    methods:{
      gotoDetail (item) {
        this.$router.push('incomeDetail?id' + item.id)
      }
    }
  }
</script>

<style lang="less" scoped>

  </style>
